<template>
    <div class='dialog-container'>
        <header>
            <h2>{{shopHeadList.name}}</h2>
            <Rater 
                disabled
                active-color='#ffaa0c'
                :font-size = 30
                :margin = -5
                v-model="shopHeadList.rating" 
                slot="value">
            </Rater>
        </header>
        <div class='dialog-content'>
            <section class='cheap'>
                <span>优惠信息</span>
                <div>
                    <p v-for='item in shopHeadList.activities'>
                        <span :style='"background-color:#"+item.icon_color'>{{item.icon_name}}</span>
                        <span></span>{{item.description}}
                    </p>
                </div>
            </section>
            <section class='notice'>
                <span>商家公告</span>
                <div>
                    <p>{{shopHeadList.promotion_info}}</p>
                </div>
            </section>
        </div>
        <footer>
            <span class='fa fa-close close' @click='closeDialog'></span>
        </footer>
    </div>
</template>
<script>
    import { Rater,Cell } from 'vux'
    export default{
        props:['shopHeadList'],
        methods:{
            closeDialog:function(){
                this.$emit('close')
            }
        },
        components:{
            Rater,
            Cell,
        }
    }
</script>
<style scoped>
    .dialog-container{
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        background-color: #262626;
        color:#fff;
        z-index: 100;
        text-align: center;
    }
    header{
        margin-top: 50px;
    }
    header h2{
        font-size: 2rem;
        font-weight: normal;
        margin: 0;
    }
    .dialog-content{
        padding: 20px;
    }
    .dialog-content section>span{
        width: 100px;
        height: 20px;
        padding:3px 6px;
        border: 1px solid #666;
        border-radius: 30px;
    }
    .dialog-content section>div{
        margin: 20px 0;
        text-align: left;
    }
    section>div>p{
        padding: 5px;
    }
    footer{
        width: 100%;
        position: fixed;
        bottom: 30px;
        text-align: center;
        color: #666;
        margin: 0 auto;
    }
    footer span{
        width: 50px;
        height: 50px;
        line-height: 45px;
        border: 3px solid #666;
        border-radius: 50%;
        font-size: 30px;
    }
</style>